<template>
  <div>
    <div class="dialogPop">
      <el-dialog :visible.sync="addData.dialogAdd" :before-close="handleClose">
        <p class="dialog-title">时间段{{addData.titleIndex}}修改</p>
        <el-form :model="addData"  ref="addData" label-width="100px" :rules="rules">
            <div class="areaBoxcon">
                <el-row>
                    <el-col :span="11">
                        <el-form-item label="开放时间">
                             <el-time-picker
                                v-model="addData.startTime"
                                format='HH:mm'
                                :editable='false'
                                :picker-options="{
                                    selectableRange: addData.startRange.start+' - '+addData.startRange.end
                                }"
                                placeholder="任意时间点">
                            </el-time-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="11" :offset="1">
                        <el-form-item label="结束时间：">
                           <el-time-picker
                                arrow-control
                                format='HH:mm'
                                v-model="addData.endTime"
                                :editable='false'
                                :picker-options="{
                                    selectableRange: newTimeStartTime()+' - '+addData.endRange.end
                                }"
                                placeholder="任意时间点">
                            </el-time-picker>
                        </el-form-item>
                    </el-col>
               </el-row>
            </div>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <p class="btn">
            <el-button @click="resetFormdelDialogAdd('addData')">取 消</el-button>
            <el-button type="primary" @click="addInfor('addData')" :loading="loadingBtn">确 定</el-button>
          </p>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import {updateOpenTime} from 'api/deviceManagement';
import moment from 'moment';
export default {
    props: {
        addData: {
            default() {
                return {
                    dialogAdd: false // 默认不显示
                }
            },
            required: true
        }
    },
    data() {
        return {
            loadingBtn: false,
            rules: {
            }
        };
    },
    created() {
//         Date.parse(new Date('2017-11-1 12:12:11'))> Date.parse(new Date('2017-11-1 12:12:10'))
    },
    methods: {
        // 结束时间段的开始范围：是当前的开放时间
        newTimeStartTime() {
            if (this.addData.startTime==''||this.addData.startTime===null||this.addData.startTime===undefined) {
                return '00:00:00'
            } else {
                let timestamp=Date.parse(new Date(this.addData.startTime));// 加一分钟后的时间磋
                return moment(timestamp).format('HH:mm:ss');
            }
        },
        // 点击时间段修改的 弹窗的确认按钮，添加和修改信息
        addInfor(addData) {
            this.$refs[addData].validate((valid) => {
                if (valid) {// 验证通过
                    this.updateTime();                                  
                } 
            });
        },
        
        // 更新时间的条件：
        updateTime() {
            this.timeNotFull();
            if (this.timeNotFull()==true) {
                let isSetOneTimeNull='1';// 清空第一时间段
                let openStartTimeFirst=this.changStartTime();
                let openEndTimeFirst=this.changEndTime();
                if (this.addData.indexRow=='0') {// 如果时间段1空的
                    if (openStartTimeFirst==''&&openEndTimeFirst=='') {
                        this.isSetOneTimeNull(isSetOneTimeNull);
                    } else {
                        isSetOneTimeNull='0';// 不是清空第一时间段
                        this.isSetOneTimeNull(isSetOneTimeNull);
                    }
                } else {
                    isSetOneTimeNull='0';
                    this.isSetOneTimeNull(isSetOneTimeNull);
                }
            }
        },
        // 是不是清空第一时间段的操作
        isSetOneTimeNull(isSetOneTimeNull) {
            let confirm=isSetOneTimeNull=='1'?'修改后将设置为默认时间段,是否确认修改？':'是否确认修改？';
            this.$confirm(confirm, ' ', {
                confirmButtonText: '确定',
                cancelButtonText: '取消'
            }).then(() => {
                this.updateTimeFun();
            }).catch(() => {
                this.$message.info('已取消操作')
            });
        },
        // 更新时间接口
        updateTimeFun() {
            let pId=this.addData.pId;// 时间段记录id，没有则为空
            let fClassId=this.addData.fClassId; // 班级id（教学区域）或学校id（公共区域）
            let openStartTimeFirst=''; // 第一时段开始
            let openEndTimeFirst=''; // 第一时段结束
            let openStartTimeSecond='';
            let openEndTimeSecond='';
            let openStartTimeThird='';
            let openEndTimeThird='';
            if (this.addData.indexRow=='0') {
                openStartTimeFirst=this.changStartTime();
                openEndTimeFirst=this.changEndTime();
                if (openStartTimeFirst=='') {
                    openStartTimeFirst='08:00:00'
                }
                if (openEndTimeFirst=='') {
                    openEndTimeFirst='18:00:00'
                }
                openStartTimeSecond= this.addData.secondStart;// HH-mm
                openEndTimeSecond=this.addData.secondEnd;
                openStartTimeThird=this.addData.thirdStart;
                openEndTimeThird=this.addData.thirdEnd;
            } else if (this.addData.indexRow=='1') {
                openStartTimeFirst=this.addData.firstStart;
                openEndTimeFirst=this.addData.firstEnd;
                openStartTimeSecond=this.changStartTime();
                openEndTimeSecond=this.changEndTime();
                openStartTimeThird=this.addData.thirdStart;
                openEndTimeThird=this.addData.thirdEnd;
            } else if (this.addData.indexRow=='2') {
                openStartTimeFirst=this.addData.firstStart;
                openEndTimeFirst=this.addData.firstEnd;
                openStartTimeSecond=this.addData.secondStart;
                openEndTimeSecond=this.addData.secondEnd;
                openStartTimeThird=this.changStartTime();
                openEndTimeThird=this.changEndTime();
            }
            this.loadingBtn=true;
            // 三个时间段都要返回去
            this.updateOpenTime(pId, fClassId, openStartTimeFirst, openEndTimeFirst, openStartTimeSecond, openEndTimeSecond, openStartTimeThird, openEndTimeThird)
        },
        updateOpenTime(pId, fClassId, openStartTimeFirst, openEndTimeFirst, openStartTimeSecond, openEndTimeSecond, openStartTimeThird, openEndTimeThird) {
            updateOpenTime(// 三个时间段都要返回去
                pId,
                fClassId,
                openStartTimeFirst,
                openEndTimeFirst,
                openStartTimeSecond,
                openEndTimeSecond,
                openStartTimeThird,
                openEndTimeThird
                ).then(res => {
                    if (res.data.status==200) {
                        this.loadingBtn=false;
                        this.addData.dialogAdd=false;
                        this.$message.success('修改成功!');
                        this.$emit('search', '');
                    }
                }).catch(() => {
                    this.loadingBtn=false;
                });
        },
        // 点击确定，如果有时间段选择不完整(时间段都填写)
        timeNotFull() {
            if (this.haveStart()==''&&this.haveEnd()=='') {// 如果都空就是清空操作
                return this.afterNull();
            } else if (!(this.haveStart()==''&&this.haveEnd()=='')&&(this.haveStart()==''||this.haveEnd()=='')) {
                this.$message.info('时间段不完整！');
                return false
            } else if (this.addData.startTime&&this.addData.endTime) {
                let currentDate=moment(new Date()).format('YYYY-MM-DD')+' ';// 当前年
                let start=Date.parse(currentDate+moment(this.addData.startTime).format('HH:mm'))// 12-23日 把format('HH:mm:ss')修改成format('HH:mm')
                let end=Date.parse(currentDate+moment(this.addData.endTime).format('HH:mm'))// // 12-23 把format('HH:mm:ss')修改成format('HH:mm')
                if (start>=end) {
                    this.$message.info('结束时间需要大于开始时间！')
                    return false
                }
            } 
            return true
        },
        afterNull() {
            if (this.addData.indexRow=='0') {// 第一段 则判断第2,是否有值
                // if (this.addData.secondStart==''&&this.addData.secondEnd=='') {// 只有第一时间段，要清空第一时间段
                //     this.$message.info('时间段一不得为空')
                //     return false
                // }
                if (this.addData.secondStart!=''||this.addData.secondEnd!='') {
                    this.$message.info('请先清空时间段二！')
                    return false
                }
            } else if (this.addData.indexRow=='1') {// 第2段 则判断第2段和谁重叠
                if (this.addData.thirdStart!=''||this.addData.thirdEnd!='') {
                    this.$message.info('请先清空时间段三！')
                    return false
                }
            }
            return true
        },
         // 开始时间是否为空
        haveStart() {
            if (this.addData.startTime==''||this.addData.startTime===null||this.addData.startTime===undefined) {
                return ''
            }
        },
         // 结束时间是否为空
        haveEnd() {
            if (this.addData.endTime==''||this.addData.endTime===null||this.addData.endTime===undefined) {
                return ''
            }
        },
         // 获取当前被修改的开始时间
        changStartTime() {
            if (this.addData.startTime) {
                let timestamp=Date.parse(new Date(this.addData.startTime));// 修改后的时间段的开始时间磋
                return moment(timestamp).format('HH:mm')+':00';// 当前时间
            } else {
                return ''
            }
        },
         // 获取当前被修改的结束时间
        changEndTime() {
            if (this.addData.endTime) {
                let timestamp=Date.parse(new Date(this.addData.endTime));// 修改后的时间段的开始时间磋
                return moment(timestamp).format('HH:mm')+':00'// 当前时间
            } else {
                return ''
            }
        },
       // 弹出框的关闭按钮
        handleClose(done) {
            this.$refs.addData.resetFields();
            this.delDialogAdd();
        },
        resetFormdelDialogAdd(addData) {
            this.$refs[addData].resetFields();
            this.delDialogAdd();
        },
        // 还原弹窗信息（addDate是接受的父组件，不可以addDate={}这样修改）
        delDialogAdd() {
            this.addData.dialogAdd=false;   
            this.loadingBtn=false;    
        }
       
    }
}
</script>
<style lang="scss" scoped>
.dialogPop {
    .dialog-title {
        font-size: 20px;
        text-align: center;
        line-height: 1;
        font-size: 16px;
        font-weight: 700;
        color: rgb(61, 41, 31);
        position: relative;
        top: -26px;
        width: -moz-calc(100% - 30px);
        width: -webkit-calc(100% - 30px);
        width: calc(100% - 30px);
    }
    .el-dialog__footer {
        .dialog-footer {
            display: inline-block;
            width: 100%;
            text-align: center;
            padding-bottom: 20px;
        }
    }
    .chose {
        display: inline-block;
        height: 36px;
        line-height: 36px;
        color:#ff5e2c;
    }
    .areaBoxcon{
       padding: 0px 0px 30px;
    }
    .addBtn{
        margin-left:24px;
        color:#ff5e2c;
        cursor: pointer;
          &:hover{
            color:rgb(255, 126, 86);
        }
    }
    .time-title{
        font-size:16px;
        padding-left:20px;
        height: 38px;
        line-height:38px;
        margin-bottom:12px;
    }
}
</style>


